<template>
  <div :style="style">
    <div ref="editor" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script>
module.exports = {
  props: {
    width: { type: [String, Number], default: '100%' },
    height: { type: [String, Number], default: '100%' },
    original_value: { type: String, default: '' },
    original_language: { type: String, default: '' },
    modified_value: { type: String, default: '' },
    modified_language: { type: String, default: 'json' },
    theme: { type: String, default: 'vs-dark' },
    fontsize: { type: [String, Number], default: '16px' },
    fontfamily: { type: String, default: 'DejaVuSansMono' },
  },
  data: function () {
    return {
      editor: null,
      originaModel: monaco.editor.createModel(this.original_value, this.original_language),
      modifiedlModel: monaco.editor.createModel(this.modified_value, this.modified_language),
      style: {
        height: this.height,
        width: this.width,
      },
    };
  },
  methods: { },
  watch: {
    original_value(newValue) {
      this.originaModel.setValue(newValue);
    },
    modified_value(newValue) {
      this.modifiedlModel.setValue(newValue);
    },
  },
  mounted() {
    this.editor = monaco.editor.createDiffEditor(this.$refs.editor, {
      theme: this.theme,
      fontSize: this.fontsize,
      automaticLayout: true,
    });
    this.editor.setModel({ original: this.originaModel, modified: this.modifiedlModel });
  },
};
</script>

<style scoped>
</style>